<template>
	<view>
		<view class="hotelNav">
			<u-navbar :is-fixed="true" :is-back="false" :background="background">
				<view class="Navcustom">
					<view class="custom">
						<view class="custom-left" @click="back">
							<image src="/static/imgs/backicon.png" mode=""></image>
						</view>
						<view class="custom-right">
							<!-- <image src="/static/imgs/backicon.png" mode=""></image> -->
							<image src="/static/imgs/fengxiangbg.png" mode="" @click="show = true"></image>
							<image src="/static/imgs/moreicon.png" mode=""></image>
						</view>
					</view>
				</view>
			</u-navbar>
			<image src="/static/imgs/del/del1.png" mode=""></image>

			<view class="hoteDetails">
				<view class="hote_name">
					<view class="name">
						<text>深圳福田希尔顿酒店</text>
						<image v-for="(item,index) in 5" src="/static/imgs/zuanshi.png" mode=""></image>
					</view>
					<view class="hotel_phone">
						<view class="hotel_phone-left">
							<text>2012年开业</text>
							<view class="leftImage">
								<image src="/static/imgs/jiaotonxinxi.png" mode=""></image>
								<text>健身房</text>
							</view>
						</view>
						<view class="hotel_phone-right">
							<text @click="navTo('./hotelIntro')">详情</text><text>/电话</text>
							<u-icon name="arrow-right" color="#666666"></u-icon>
						</view>
					</view>
				</view>
				<view class="hotel_comment">
					<view class="hotel_comment-left">
						<view class="leftscore">
							<text>4.9</text>
						</view>
						<view class="scoreLv">
							<text>不错</text>
						</view>
						<view class="peers">
							<text>高于80%同城豪华型酒店</text>
						</view>
					</view>
					<view class="hotel_comment-right" @click="navTo('./remark')">
						<text>1239条点评</text>
						<u-icon name="arrow-right" color="#666666"></u-icon>
					</view>
				</view>
				<view class="hotelAddress">
					<view class="hotelAddress-left">
						<view class="leftTop">
							<text>会展中心</text>
							<view class="line"></view>
							<text>彩田路2009号瀚森大厦</text>
						</view>
						<view class="leftBottom">
							<image src="/static/imgs/ditie.png" mode=""></image>
							<text>距离岗厦地铁站-D口步行100米，约5分钟</text>
						</view>
					</view>
					<view class="hotelAddress-right" @click="toMap">
						<image src="/static/imgs/map.png" mode=""></image>
						<text>地图</text>
					</view>
				</view>
			</view>
		</view>

		<view class="hotelType">
			<view class="TypeTop">
				<view class="TypeTop-left">
					<view class="leftCalendar" @click="showCalendar=true">
						<view class="calendar">
							<text>2月25日</text>
						</view>
						<view class="calTime">
							<text>今天</text>
						</view>
					</view>
					<view class="leftCenter">
						<text>2晚</text>
					</view>
					<view class="leftCalendar" @click="showCalendar=true">
						<view class="calendar">
							<text>2月27日</text>
						</view>
						<view class="calTime">
							<text>周三</text>
						</view>
					</view>
				</view>
				<view class="TypeTop-right">
					<text>1间 1人</text>
				</view>
			</view>
			<view class="TypeBottom">
				<view class="TypeBottom-left">
					<scroll-view class="leftScroll" :scroll-x="true">
						<view class="scrollFlex">
							<view class="rightscreen" v-for="toindex in 10">
								<text>含早餐</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="TypeBottom-right">
					<view class="rightscreen" @click="filterPop=true">
						<text>筛选</text>
						<u-icon name="arrow-down-fill" size="10"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="roomType">
			<view class="room" v-for="room in 3">
				<view class="roomTop">
					<view class="roomTop-left">
						<image src="/static/imgs/del/del.png" mode=""></image>
					</view>
					<view class="roomTop-right">
						<view class="rightTitle">
							<text>商务大床房</text>
							<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
						</view>
						<view class="rightType">
							<text>大床</text>
							<text>2-10楼</text>
							<text>2人</text>
							<text>有窗</text>
							<text>25-30m</text>
						</view>
						<view class="rightPrice">
							<text>¥ <text style="font-size: 36rpx;">588</text> <text style="color: #666666;">起</text>
							</text>
							<image src="/static/imgs/zuanxiangy.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="roomType-Chose" v-for="top in 2">
					<view class="choseLeft">
						<view class="choseLeft-title">
							<text>豪华套房</text>
						</view>
						<view class="choseLeft-type">
							<text>无早</text>
						</view>
						<view class="choseLeft-function">
							<text>平台开票</text>
							<text>立即确认</text>
							<text style="color: #F93739;">不可取消</text>
						</view>
						<view class="choseLeft-time">
							<text>入住日2021-03-02 18:00:00前不可取消</text>
						</view>
					</view>
					<view class="choseRight">
						<view class="choseRight-money">
							<text>¥ <text style="font-size: 36rpx;">588</text></text>
						</view>
						<view class="choseRight-button" @click="navTo('./order/order')">
							<text>订</text>
							<view class="buttonContent">
								<text>在线订</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-calendar v-model="showCalendar" :change-year='false' mode="range" start-text='入住' end-text='离店'
			:min-date='minDate' :maxDate='maxDate' @change='changeFn'></u-calendar>

		<u-popup v-model="filterPop" mode="bottom" :safe-area-inset-bottom="true" closeable>
			<view class="filter">
				<view class="title">
					筛选
				</view>
				<view class="lable">
					开票方式
				</view>
				<view class="bill">
					<view class="bill-item">
						不限
					</view>
					<view class="bill-item">
						平台发票
					</view>
					<view class="bill-item">
						酒店开票
					</view>
				</view>
				<view class="lable">
					床型筛选
				</view>
				<view class="bill">
					<view class="bill-item">
						不限
					</view>
					<view class="bill-item">
						大床房
					</view>
					<view class="bill-item">
						双床房
					</view>
					<view class="bill-item act">
						单人床
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true" :closeable="true">
			<view class="share">
				<view class="shareTitle">
					<text>分享到</text>
				</view>
				<view class="shareType">
					<view class="shareType-lr">
						<image src="/static/imgs/weixinhy.png" mode=""></image>
						<text>微信好友</text>
					</view>
					<view class="shareType-lr">
						<image src="/static/imgs/pengyouq.png" mode=""></image>
						<text>朋友圈</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filterPop: false,
				show: false,
				showCalendar: false,
				minDate: '',
				maxDate: '',
				background: {
					backgroundColor: ''
				}
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 160) {
				this.background.backgroundColor = 'rgba(255,255,255,1)'
			} else {
				this.background.backgroundColor = ''
			}
		},
		onLoad() {
			let date = new Date()
			this.minDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
			this.maxDate = (date.getFullYear() + 1) + '-' + (date.getMonth() + 1) + '-' + date.getDate()
		},
		methods: {
			// 打开地图
			toMap(latitude, longitude, name) {
				let url = "";
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "百度地图"
						}, {
							title: "高德地图"
						}],
					}, function(e) {
						switch (e.index) {
							case 1:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 2:
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("未安装应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 2:
								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("未安装应用");
							});
						}
					})
				}
			},
			changeFn(e) {
				console.log(e)
			},
			navTo: function(url) {
				uni.navigateTo({
					url: url
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-navbar-placeholder {
		width: 100%;
		height: 0rpx !important;
	}

	page {
		background-color: #FFFFFF;
	}

	.line {
		width: 4rpx;
		height: 32rpx;
		margin: 0rpx 10rpx;
		background-color: #707070;
	}

	.hotelNav {
		width: 100%;
		height: 534rpx;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;

		image {
			width: 100%;
			height: 100%;
		}

		.Navcustom {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.custom {
				width: 694rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-left {
					width: 64rpx;
					height: 64rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				&-right {
					display: flex;
					align-items: center;

					image {
						width: 64rpx;
						height: 64rpx;
						margin-left: 12rpx;
					}
				}
			}
		}

		.hoteDetails {
			width: 694rpx;
			// height: 362rpx;
			display: flex;
			position: absolute;
			bottom: -230rpx;
			align-items: center;
			border-radius: 8rpx;
			flex-direction: column;
			background-color: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);

			.hote_name {
				width: 654rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				padding: 20rpx 0rpx 16rpx 0rpx;
				border-bottom: 2rpx solid #F2F2F7;

				.name {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					text {
						color: #333333;
						font-size: 36rpx;
						margin-right: 12rpx;
						font-family: Segoe UI;
						font-weight: bold;
					}

					image {
						width: 18rpx;
						height: 18rpx;
						margin-right: 4rpx;
					}
				}

				.hotel_phone {
					width: 654rpx;
					display: flex;
					margin-top: 12rpx;
					align-items: center;
					justify-content: space-between;

					&-left {
						display: flex;
						align-items: center;

						text {
							color: #333333;
							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: 400;
							margin-right: 6rpx;
						}

						.leftImage {
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 4rpx;
							}
						}
					}

					&-right {
						color: #3587F7;
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}
				}
			}

			.hotel_comment {
				width: 654rpx;
				display: flex;
				padding: 23rpx 0rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F2F2F7;

				&-left {
					display: flex;
					align-items: center;

					.leftscore {
						width: 60rpx;
						height: 42rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-image: url(../../../../static/imgs/pingfen.png);
						background-size: 100% 100%;

						text {
							color: #FFFFFF;
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
							margin-bottom: 9rpx;
						}
					}

					.scoreLv {
						color: #3587F7;
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: bold;
						margin: 0rpx 10rpx;
					}

					.peers {
						color: #333333;
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}
				}

				&-right {
					color: #3587F7;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
				}
			}

			.hotelAddress {
				width: 100%;
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-image: url(../../../../static/imgs/ditubeijing.png);
				background-size: 100% 100%;

				&-left {
					display: flex;
					margin-left: 24rpx;
					flex-direction: column;
					align-items: flex-start;

					.leftTop {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;

						text {
							color: #333333;
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: bold;
						}
					}

					.leftBottom {
						display: flex;
						align-items: center;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 6rpx;
						}

						text {
							color: #666666;
							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: 400;
						}
					}
				}

				&-right {
					display: flex;
					align-items: center;
					margin-right: 32rpx;
					flex-direction: column;

					text {
						color: #3587F7;
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}

					image {
						width: 44rpx;
						height: 44rpx;
						margin-bottom: 4rpx;
					}
				}
			}
		}
	}

	.hotelType {
		width: 100%;
		display: flex;
		margin-top: 236rpx;
		align-items: center;
		flex-direction: column;
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);

		.TypeTop {
			width: 694rpx;
			display: flex;
			align-items: center;
			padding: 36rpx 0rpx 20rpx 0rpx;
			justify-content: space-between;

			&-left {
				width: 500rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.leftCalendar {
					display: flex;
					align-items: center;

					.calendar {
						color: #333333;
						font-size: 32rpx;
						font-family: Segoe UI;
						font-weight: bold;
						margin-right: 10rpx;
					}

					.calTime {
						color: #666666;
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}
				}

				.leftCenter {
					width: 76rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					border-radius: 40rpx;
					justify-content: center;
					border: 2rpx solid #DFDEE2;

					text {
						color: #666666;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}
				}
			}

			&-right {
				color: #333333;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: bold;
			}
		}

		.TypeBottom {
			width: 694rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-left {
				width: 552rpx;

				.leftScroll {
					width: 100%;

					.scrollFlex {
						display: -webkit-box;
						align-items: center;

						.rightscreen {
							width: 124rpx;
							height: 52rpx;
							display: flex;
							margin-right: 16rpx;
							align-items: center;
							justify-content: center;
							background-color: #F4F4F4;

							text {
								color: #333333;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 300;
							}
						}
					}
				}
			}

			&-right {
				width: 134rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				background-color: #FFFFFF;

				.rightscreen {
					width: 124rpx;
					height: 52rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #F4F4F4;

					text {
						color: #333333;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 300;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	.roomType {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;

		.room {
			width: 694rpx;
			display: flex;
			padding: 22rpx 0rpx;
			justify-content: flex-start;
			flex-direction: column;
			border-bottom: 2rpx solid #F2F2F7;

			.roomTop {
				width: 100%;
				display: flex;
				align-items: flex-start;

				&-left {
					width: 180rpx;
					height: 200rpx;
					overflow: hidden;
					margin-right: 20rpx;
					border-radius: 12rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				&-right {
					width: 494rpx;

					.rightTitle {
						display: flex;
						align-items: center;

						text {
							color: #333333;
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 600;
						}
					}

					.rightType {
						margin-top: 20rpx;

						text {
							color: #666666;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							margin-right: 12rpx;
						}
					}

					.rightPrice {
						width: 100%;
						display: flex;
						margin-top: 36rpx;
						align-items: center;
						justify-content: flex-end;

						text {
							color: #FF4600;
							font-size: 24rpx;
							font-family: Arial;
							font-weight: 400;
						}

						image {
							width: 28rpx;
							height: 28rpx;
							margin-left: 12rpx;
						}
					}
				}

			}
		}

		&-Chose {
			width: 694rpx;
			display: flex;
			padding: 10rpx 0rpx;
			align-items: flex-end;
			justify-content: space-between;

			.choseLeft {
				&-title {
					color: #333333;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 600;
				}

				&-type {
					color: #666666;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					margin-top: 12rpx;
				}

				&-function {
					margin-top: 8rpx;

					text {
						color: #3587F7;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						margin-right: 12rpx;
					}
				}

				&-time {
					color: #666666;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					margin-top: 8rpx;
				}
			}

			.choseRight {
				display: flex;
				align-items: flex-end;

				&-money {
					color: #FF4600;
					font-size: 24rpx;
					font-family: Arial;
					font-weight: 400;
				}

				&-button {
					width: 92rpx;
					height: 92rpx;
					display: flex;
					margin-left: 20rpx;
					align-items: center;
					border-radius: 8rpx;
					flex-direction: column;
					background: linear-gradient(126deg, #F5B053 0%, #F8912C 100%);

					text {
						color: #FFFFFF;
						font-size: 36rpx;
						font-family: Segoe UI;
						font-weight: bold;
						margin-top: 4rpx;
					}

					.buttonContent {
						width: 88rpx;
						height: 38rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 8rpx;
						background-color: #FFFFFF;

						text {
							color: #F57426;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							margin-top: 0rpx;
						}
					}
				}
			}
		}
	}

	.share {
		width: 100%;
		height: 340rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #FFFFFF;

		.shareTitle {
			margin-top: 28rpx;
			color: #333333;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 400;
		}

		.shareType {
			width: 452rpx;
			height: 240rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-lr {
				display: flex;
				margin-top: 27rpx;
				align-items: center;
				flex-direction: column;

				image {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 22rpx;
				}

				text {
					color: #333333;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
				}
			}
		}
	}

	.filter {
		padding: 0 28rpx 32rpx;

		.title {
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 400;
		}

		.lable {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
		}

		.bill {
			display: flex;
			align-items: center;

			.bill-item {
				width: 136rpx;
				height: 52rpx;
				background: #F4F4F4;
				border-radius: 4rpx;
				text-align: center;
				line-height: 52rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #333333;
				margin-right: 20rpx;
			}
			& .act {
				border: 1px solid #3587F7;
			}
		}
	}

	/deep/.u-border-bottom::after {
		content: '';
		border: none;
	}
</style>
